<template>
  <div class="met" :style="{backgroundColor:app_tabBar.config.bodybgcolor}">
    <banner></banner>
    <section class="index_body" v-for="item in index_data.content" :key="item.id">
      <div class="main" v-if="item.is_show==='1'">
        <div class="head" v-if="item.block!=='1'">
          <h2 class="title" :style="{color:app_tabBar.config.firstcolor}">
            {{item.title}}
          </h2>
          <p class="subtitle" :style="{color:app_tabBar.config.secondcolor}">{{item.subtitle}}</p>
        </div>
        <index-service v-if="item.block==='4'" :data="item"></index-service>
        <index-product v-if="item.block==='2'" :data="item" :tab="product_tab"></index-product>
        <index-about v-if="item.block==='1'" :data="item"></index-about>
        <index-news v-if="item.block==='3'" :data="item"></index-news>
      </div>
    </section>
  </div>
</template>

<script>
import { Banner } from '@/components/common'
import { IndexAbout, IndexService, IndexProduct, IndexNews } from '@/components/index'
import { mapGetters } from 'vuex'
export default {
  components: {
    Banner,
    IndexAbout,
    IndexNews,
    IndexService,
    IndexProduct
  },
  data() {
    return {
      index_data: {},
      loading: true,
      product_tab: []
    }
  },
  computed: {
    ...mapGetters(['app_tabBar'])
  },
  methods: {
    fetchData() {
      this.$store.dispatch('GetTabBar').then(response => {
      })
      const param = {
        column_id: 10001
      }
      this.$store.dispatch('SetActiveColumn', param)
      this.$store.dispatch('GetBanner', param).then(response => {})
      this.$store.dispatch('GetIndexData').then(response => {
        this.index_data = response.data
        document.title=response.data.head.met_webname
        response.data.content.map(item => {
          if (item.block === '2') {
            const product = {
              column_id: item.column_id,
              classtype: item.classtype,
              module: item.module
            }
            this.$store.dispatch('GetSubcolumnNav', product).then(response => {
              this.product_tab = response.data
            })
          }
        })
        setTimeout(() => {
          this.loading = false
        }, 500)
      })
    }
  },
  created() {
    this.fetchData()
  }
}
</script>
